<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-10-13 16:33:11
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-10-13 21:30:58
 * @FilePath: /aibox/src/modules/good/src/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page">
    <scroll-view
      class="scroll"
      scroll-y="true"
      @refresherrefresh="refreshAction"
      @scrolltolower="toLowerAction"
      refresher-enabled="true"
    >
      <div class="section pitch_default">
        <div class="p_default row">
          <van-swipe class="swiper" :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <van-image
                width="100%"
                height="100%"
                fit="cover"
                position="center"
                :src="image"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="row px_default">
          <div class="card radius_sm p_default express-card">
            <div class="justify_between align-items_center mb_md">
              <div>
                <div class="h4">查看取件码</div>
                <div style="color: #a8a9ae">快递取件码</div>
              </div>
              <van-button plain type="primary" round size="small" class="px_md" @click="toMiniProgramAction"
                >查看</van-button
              >
            </div>

            <div
              class="radius_xs p_sm min-card justify_center align-items_center"
            >
              <image
                src="/static/phone.png"
                class="icon-phone"
                mode="widthFix"
              />跳转合作的快递小程序 <van-icon name="arrow" class="mx_xs" />
              <image
                src="/static/find.png"
                class="icon-find"
                mode="widthFix"
              />查看快递取件码
            </div>
          </div>
        </div>
        <div class="grid column_2 p_xs">
          <div class="grid-item p_xs" v-for="item in dataList" :key="item.id">
            <Good
              @click="navigate(`/modules/good/src/detail?id=${item.id}`)"
              v-bind="item"
            ></Good>
          </div>
        </div>
      </div>
      <div class="scroll-footer"></div>
    </scroll-view>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import { navigate } from '@/service/navigate';
import { Good, Dynamic, Footer } from '@/components';
import { getGoodList } from '@/api/good.service';
import { usePageList } from '@/hooks/index';

export default defineComponent({
  name: 'GoodList',
  components: {
    Good,
  },
  setup() {
    const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];


    const { dataList, toLowerAction, refreshAction } = usePageList(getGoodList);

    const toMiniProgramAction = () => {
      uni.navigateToMiniProgram({
        appId: '目标小程序的AppID', 
        path: '页面路径',
        extraData: {
          // 可选，传递给目标小程序的额外数据
          param1: 'value1',
          param2: 'value2'
        },
        success(res) {
          console.log('成功跳转到目标小程序', res);
        },
        fail(err) {
          console.error('跳转失败', err);
        }
      });
    }

    return { navigate, images, dataList, toLowerAction, refreshAction, toMiniProgramAction };
  },
});
</script>

<style lang="scss">
.scroll {
  height: 100%;
}
.swiper {
  height: 200px;
}
.scroll-footer {
  height: 50px;
}

.express-card {
  background-color: #f1f1f1;
  background-image: url('@/static/pack.png');
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: center;

  .min-card {
    background: #fff;
    font-size: 14px;
  }
}

.icon-phone {
  width: 20px;
}
.icon-find {
  width: 24px;
}
</style>
